<template>
  <vxe-grid v-bind="gridOptions" />
</template>

<script setup>
  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  })

  const tableData = ref([])

  watch(
    () => props.list,
    (list) => {
      const listMap = {}
      const table = []
      list.forEach((item) => {
        if (!listMap[item.fileBusinessType]) {
          listMap[item.fileBusinessType] = []
        }
        listMap[item.fileBusinessType].push(item)
      })
      for (const key in listMap) {
        table.push({
          type: key,
          arr: listMap[key],
        })
      }
      console.log(table)
      tableData.value = table
    },
    { immediate: true }
  )

  const gridOptions = reactive({
    border: true,
    data: tableData.value,
    columns: [
      {
        field: 'fileBusinessType',
        title: '材料名称',
        width: 200,
        formatter: ({ row }) => {
          const nameMap = {
            16: '验收申请表',
            17: '研究大纲',
            18: '计划任务书',
            19: '研究报告',
            20: '财务决算报告',
            21: '经济及社会效益分析报告',
            22: '用户使用报告',
            23: '标准化审查报告',
            24: '知识产权报告',
            25: '自验收结论报告',
            26: '验收评价报告',
          }
          return nameMap[row.type]
        },
      },
      {
        field: 'fileName',
        title: '上传文档',
        formatter: ({ row }) => {
          const arr = []
          row.arr.forEach((item) => {
            arr.push(item.fileName)
          })
          return arr
        },
      },
    ],
  })
</script>
